@import "./pxtovw";
@import "./footer";
@mixin center{
    width: vw(704);
    margin: 0 auto;
}
@mixin img{
    width: 100%;
    height: 100%;
}
header{
    @include center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: vw(50);
    .back{
        width: vw(123);
        height: vw(57);
        border: 2px solid #ff9344;
        border-radius: vw(15);
        font-size: vw(30);
        color: black;
        text-align: center;
        line-height: vw(50);
    }
    .hd-name{
        font-size: vw(30);
    }
    .head-rg{
        width: vw(50);
        height: vw(50);
        img{
            @include img;
        }
    }
  
}
section{
    @include center;
    margin-top: vw(30);
    margin-bottom: vw(110);
    .banner{
        width: vw(704);
        height: vw(260);
        img{
            @include img;
        }
    }
    .buy{
        width: vw(665);
        margin: vw(30) auto;
        display: flex;
        justify-content: space-between;
        & div:first-child{
            font-size:vw(40) ;
            color: #ff9344;
        }
        & div:last-child{
            background-color:#ff9344;
            font-size:vw(30) ;
            width: vw(110);
            height: vw(60);
            color: white;
            text-align: center;
            line-height: vw(60);
            border-radius: vw(20);
        }
    }
    .evaluate{
        width: vw(665);
        display: flex;
        margin: 0 auto;
        justify-content: space-between;
        & div:first-child{
            font-size:vw(30);
            span{
                font-size:vw(30);
                color: #ff9344 ;
            }
            img{
                width: vw(35);
                height: vw(35);
                vertical-align: top;
            }
        }
        & div:last-child{
            font-size:vw(30);
            color: #8e8e8e;
        }
    }
    .merchant{
        width: vw(665);
        margin: vw(35) auto;
        .mc-top{
            background-color:  #ff9344;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: vw(10);
            div{
                font-size: vw(30);
                color: white;
                line-height: vw(50);
            }
            div:last-child{
                font-size: vw(50);
            }
        }
        .mc-bottom{
            & .shop:first-child>.sp-lf::before{
                content: "正佳店";
            }
            & .shop:nth-child(2)>.sp-lf::before{
                content: "体育西路";
            }
            & .shop:last-child>.sp-lf::before{
                content: "昌岗店";
            } 
            .shop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: vw(10);
                position: relative;
                .sp-lf{
                    width: vw(176);
                    height: vw(176);
                    &::after{
                        content: "";
                        display: inline-block;
                        width: vw(176);
                        height: vw(38);
                        background-color:white;
                        position: absolute;
                        top: vw(90); 
                        left: -0.1%;
                        opacity: 0.5; 
                        font-size:vw(25) ;
                        text-align: center; 
                    }
                    &::before{
                        content: "";
                        display: inline-block;
                        width: vw(176);
                        height: vw(38);
                        position: absolute;
                        top: vw(90); 
                        left: -0.1%; 
                        font-size:vw(25) ;
                        color: black;
                        text-align: center; 
                        z-index: 1;
                    }
                     
                    img{
                        @include img;
                        
                        
                    }
                }
                .sp-rg{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: vw(460);
                    .rg-lf{
                        p:first-child{
                            font-size: vw(30);
                            line-height: vw(50);
                        }
                        div{
                            display: flex;
                            justify-content: space-between;
                            font-size: vw(25);
                            color: #929292;
                            img{
                                width: vw(34);
                                height: vw(34);
                               
                            }

                        }
                        p:nth-of-type(2){
                            font-size: vw(25);
                            color: #929292;
                            line-height: vw(40);
                        }
                        p:last-of-type{
                            font-size: vw(20);
                            color: #ff9344;
                            line-height: vw(50);
                        }
                    }
                    .rg-rg{
                        width: vw(110);
                        height: vw(60);
                        font-size: vw(30);
                        text-align: center;
                        line-height: vw(60);
                        color:white;
                        background-color: #ff9344;
                        border-radius: vw(20);

                    }
                }
            }
        }
    }
}